<template>
  <div class="user">
    <h3>用户列表</h3>
    <el-button class="add_to" type="info" @click="handleAddUser">添加</el-button>
    <br>
    <br>
    <hr>
    <el-input v-model="input.value" style="width:192px ;height: 25px;padding-left: 20px;" placeholder="id/姓名/电话" />
    <el-button class="search" type="info" @click="handleSearch">搜索</el-button>
    <br>
    <hr>
    <el-table :data="tableData" style="width: 100%;">
      <el-table-column property="id" label="用户ID" width="80" align="center" />
      <el-table-column property="wechat" label="微信" width="100" align="center" />
      <el-table-column property="name" label="真实姓名" width="80" align="center" />
      <el-table-column property="sex" label="性别" width="60" align="center" />
      <el-table-column property="phone" label="电话" width="120" align="center" />
      <el-table-column property="address" label="收货地址" width="100" align="center" />
      <el-table-column property="time" label="注册时间" width="150" align="center" />
      <el-table-column property="surplus" label="剩余总次数" width="100" align="center" />
      <el-table-column property="consumption" label="消费总次数" width="100" align="center" />
      <el-table-column property="balance" label="余额" width="60" align="center" />
      <el-table-column label="操作" width="590" hide-on-single-page align="center">
        <template #default="scope">
          <u style="color:red" @click="coupon">优惠券</u>
          <u style="color:turquoise" @click="userdetail(scope.row)">详情</u>
          <u @click="edituser(scope.row)">编辑</u>
          <u style="color:red" @click="remove(scope.row.id)">删除</u>
          <button class="button" @click="orderhistory">订单记录</button>
          <button class="button" @click="delivery">配送记录</button>
          <button class="button" @click="recharge">充值记录</button>
          <button class="button" @click="withdrawal">提现记录</button>
          <button class="button" @click="weight">体重记录</button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination class="paging" background layout="prev, pager, next" :total="total" :default-page-size="pageSize"
      hide-on-single-page @current-change="pageChange" />

  </div>
</template>

<script  lang="ts">
import { defineComponent } from 'vue';
import { getUserList } from '../../api/user'
export default defineComponent({
  name: 'user',
  data() {
    return {
      input: {
        value: '',
        page: 1,
      },
      tableData: [
        {
          id: '1',
          wechat: 'xxx',
          name: '李大宝',
          sex: '男',
          phone: 138800123123,
          address: '肖家河大厦',
          time: 2017.12,
          surplus: '24次',
          consumption: '24次',
          balance: '500元',
          operation: '优惠券',
          birthday: '1988-1-8',
          height: '180cm',
          width: '55kg',
          score: '999',
          money: '560',
          regTime: '2021-1-9'
        },
      ],
      total: 1,
      pageSize: 8,
    }
  },
  methods: {
    remove(id: any) {

      this.tableData = this.tableData.filter(item => {

        return item.id != id
      })
    },
    // 筛选
  async  handleSearch() {
      const data = this.input
      data.page = 1
      // @ts-ignore
      const res = await getUserList(data)
      // @ts-ignore
      this.tableData = res.list
      // @ts-ignore
      this.total = res.total
      // @ts-ignore
      this.pageSize = res.pageSize
    },
    //优惠券
    coupon() {
      this.$router.push('/user/coupon')
    },
    //充值
    recharge() {
      this.$router.push('/user/recharge')
    },
    //提现
    withdrawal() {
      this.$router.push('/user/withdrawal')
    },
    //配送
    delivery() {
      this.$router.push('/user/delivery')
    },
    //编辑
    edituser(user: any) {
      this.$router.push({
        path: '/user/edituser',
        query: user,
      })
    },
    // 添加会员
    handleAddUser() {
      this.$router.push('/user/edituser')
    },
    //详情
    userdetail(user: any) {
      this.$router.push({
        path: '/user/userdetail',
        query: user,
      })
    },
    //订单记录
    orderhistory() {
      this.$router.push('/user/orderhistory')
    },
    //体重
    weight() {
      this.$router.push('/user/weight')
    },
    // 分页切换
    pageChange(page: number) {
      this.userDetail(page)
    },
    // 请求配送记录数据
    async userDetail(page:any) {
      const data = this.input
      data.page = 1
      const res = await getUserList(data)
      //@ts-ignore
      const { list, total, pageSize } = res
      this.tableData = list
      this.total = total
      this.pageSize = pageSize
    }
  },
  created() {
    this.userDetail(1)
  },
})

</script>

<style scoped lang="less">
.user {
  overflow: visible;
}

.user h3 {
  font-size: 18px;
  font-weight: 600;
  float: left;
  padding-left: 20px;
}

.add_to {
  display: block;
  float: right;
  margin-right: 200px;
  border-radius: 0;
}

.search {
  margin-left: 50px;
  border-radius: 0;
}

.user u {
  margin-left: 10px;
  cursor: pointer;
}

.button {
  margin-left: 10px;
  border: none;
  height: 30px;
  width: 70px;
  background-color: #cfcfcf;
  cursor: pointer;
}


.paging {
  margin-top: 30px;
  margin-left: 450px;

}
</style>

